<template>
  <div v-bind:class="divClass" @click="click">点我有惊喜</div>
  <!--v-bind简写形式-->
  <div :class="divClass" @click="click">点我有惊喜</div>
</template>

<script setup>
  import { ref } from 'vue';

  /**
   * 1、ref、reactive都可以声明响应式变量
   * 2、ref既可以声明基本类型，也可以声明引用类型
   * 3、reactive只能声明引用类型
   * 4、在代码中访问、修改ref修饰的变量要通过.value的方式, 模板中可以直接访问
   * 5、可以在Vue插件中勾选上Auto Dot Value，代码中访问ref变量将自动添加.value
   * 6、声明引用类型时，嵌套层次不深时，两者都可以。嵌套层次深时，使用reactive
   * 
   */
  let divClass = ref("normal")
  function click() {
    console.log(divClass)
    if (divClass.value === "emphasize") {
      divClass.value = "normal"
    } else {
      divClass.value = "emphasize"
    }
  }
  
</script>

<style scoped>
  div {
    cursor: pointer;
  }
  .normal {
    font-size: 16px;
  }
  .emphasize {
    font-weight: bold;
    color: red;
  }

</style>